<template>
	<view>
		<view class="preview">
			<block  v-for="(item,key) in items" :key="key">
				<view class="item">
					<view class="head">
						<image src="../../../static/store-mini.png" mode="" class="image"></image>
						<view class="title">
							{{item.name}}
						</view>
					</view>
					<view class="text">
						<block v-for="i in 5" :key="i">
							<image src="../../../static/star.png" mode="" style="width: 36upx;height: 36upx;" v-if="i<=item.score-1" @click="item.score=i+1"></image>
							<image src="../../../static/star-line.png" mode="" style="width:36upx;height: 36upx;" v-else @click="item.score=i+1"></image>
						</block>
					</view>
				</view>
				<view class="item">
					<view class="head">
						<image src="../../../static/edit.png" mode="" class="image"></image>
						<view class="title">
							评论内容
						</view>
					</view>
					<view class="text">
						<input type="text" v-model="item.content" placeholder="请输入评论内容"/>
					</view>
				</view>
			</block>
			
			<view class="item" v-if="type=='service'">
				<view class="head">
					<image src="../../../static/store-mini.png" mode="" class="image"></image>
					<view class="title">
						门店环境
					</view>
				</view>
				<view class="text">
					<block v-for="i in 5" :key="i">
						<image src="../../../static/star.png" mode="" style="width: 36upx;height: 36upx;" v-if="i<=environment_score-1" @click="environment_score=i+1"></image>
						<image src="../../../static/star-line.png" mode="" style="width: 36upx;height: 36upx;" v-else @click="environment_score=i+1"></image>
					</block>
				</view>
			</view>
			
		</view>
		<view style="height: 150upx;"></view>
		<view class="bottom">
			<view class="submit-btn" @click="confirm">
				提交评价
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		data() {
			return {
				type:"",
				order_id:"",
				environment_score:5,
				items:[],
			};
		},
		onLoad:function(e){
			this.type=e.type;
			this.order_id=e.order_id;
			this.getPreview();
		},
		components: {
			uniIcon
		},
		methods:{
			getPreview:function(){
				var that=this;
				that.ajax("/order/comment_preview/",{
					token:uni.getStorageSync("token"),
					order_id:that.order_id,
					type:that.type,
				},function(res){
					that.items=res.data.data;
				});
			},
			confirm:function(){
				var that=this;
				uni.showLoading({
					title:"提交中"
				})
				that.ajax("/order/comment/",{
					token:uni.getStorageSync("token"),
					order_id:that.order_id,
					type:that.type,
					environment_score:that.environment_score,
					items:JSON.stringify(that.items),
				},function(res){
					uni.showToast({
						title:"评论成功",
						icon:"success"
					});
					setTimeout(function(){
						uni.navigateBack({});
					},500);
				});
			}
		}
	}
</script>

<style>

	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100upx;
		font-size: 32upx;
		background: #ffffff;
		justify-content: center;
		box-shadow:0upx 2upx 20upx 0upx rgba(71,142,126,0.15);
	}
	.submit-btn{
		background: #45AA8C;
		line-height: 64upx;
		text-align: center;
		font-size: 32upx;
		color: #ffffff;
		padding: 10upx 54upx;
		border-radius: 38upx;
	}
	.discount{
		color: #fd8537;
	}
.image{
	width: 32upx;
	height: 32upx;
	margin-right: 10upx;
}
.phonecall{
	position: absolute;
	top:30upx;
	right: 30upx;
	width: 45upx;
	height: 45upx;
}
.preview{
	margin-top:20upx;
	padding: 30upx;
	background: #ffffff;
	position: relative;
	box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
}
.item{
	margin-bottom: 30upx;
	box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	border-radius:12upx;
	padding: 32upx 36upx;
}
.head{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 28upx;
}
.title{
	color: #8B8B8B;
	font-size: 28upx;
}

.text{
	font-size: 28upx;
	color:#4B4B4B;
}
.bold{
	color: #313131;
	font-weight: 600;
	font-size: 30upx;
	padding: 15upx 0;
}
</style>
